<template>
    <div>
        <!-- 入库搜索 -->
        <div class="header">
            <div class="form">
                <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">   -->
                <el-input v-model="vendor" placeholder="请输入供应商名称" suffix-icon="el-icon-search"
                    style="width: 200px;"></el-input>
                <el-button type="primary" style="margin-left: 5px;" @click="loadStoreMainList(1)">查询</el-button>
                <el-button type="success" @click="resetParam">重置</el-button>
                <!-- </el-form> -->
            </div>
            <div class="group">
                <el-button size="small" type="warning" icon="el-icon-plus" @click="toAddStoreMain">添加供应商</el-button>
            </div>
        </div>

        <!-- 入库列表列表 -->
        <div class="listContent">
            <el-table :data="tableData" stripe border style="width: 100%" header-cell-class-name="active-header"
                cell-class-name="table-center"  :cell-style="rowStyle">
                <el-table-column type="index" label="序号" width="120">
                    <!-- 这里可以自定义索引的显示格式 -->
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" v-if="false"></el-table-column>
                <el-table-column prop="date" label="时间" width="280"></el-table-column>
                <el-table-column prop="vendor" label="供应商" width="480"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
                            icon="el-icon-edit">编辑</el-button>
                        <!-- <el-button size="mini"  type="danger"  @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button> -->
                        <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)" style="margin-left: 5px;">
                            <el-button slot="reference" size="small" type="danger">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <Pagination :total="total" :pageSize="pageSize" @getPagination="getPagination"></Pagination>



        </div>
        <!-- 添加供应商对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-form-item label="供应商名称" prop="vendor">
                    <el-col :span="20">
                        <el-input v-model="form.vendor"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" id="formReset" plain @click="resetForm('form')">重置</el-button> -->
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="toAddOrEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from "@/components/pagination/Pagination.vue";

export default {
    components: {
        Pagination
    },
    data() {
        return {
            tableData: [],
            pageSize: 10,
            total: 100,
            pageNum: 1,
            vendor: '',
            dialogFormVisible: false,  //添加入库信息窗口
            title: '添加供应商信息',
            form: {
                id: '',
                vendor: '',
                date: ''
            },
            rules: {
                vendor: [
                    { required: true, message: '请输入供应商名称', trigger: 'blur' }
                ]
            },
            formLabelWidth: '120px'
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        //数据信息读取
        handleEdit(row) {
            this.dialogFormVisible = true
            this.title = "修改供应商信息";
            this.$nextTick(() => {
                //赋值到表单
                this.form.id = row.id
                this.form.vendor = row.vendor
            })
        },
        //删除入库信息
        handleDelete(id) {
            console.log("删除数据");
            this.$axios.post(this.$httpUrl + '/store/deleteMain?id=' + id).then(res => res.data).then(res => {
                console.log(res)
                if (res.code == 200) {

                    this.$message({
                        message: '删除供应商成功！',
                        type: 'success'
                    });
                    this.loadStoreMainList(1)
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }

            })
        },
        //获取点击的页码------------------------------
        getPagination(page) {
            this.loadStoreMainList(page)
        },
        //获取入库记录列表（分页）
        loadStoreMainList(page) {
            this.pageNum = page
            this.$axios.post(this.$httpUrl + '/store/pageMainList', {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                param: {
                    vendor: this.vendor
                }
            }).then(res => res.data).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.tableData = res.data;
                    this.total = res.total;
                    this.pageSize = res.pageSize;
                } else {
                    this.$message({
                        message: '列表查询失败！',
                        type: 'error'
                    });
                }
            })
        },
        //清空查询表单方法
        resetParam() {
            this.vendor = ''
        },
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        //打开添加入库对话框
        toAddStoreMain() {
            this.title = "添加供应商信息";
            this.dialogFormVisible = true;
            //重置添加入库对话框
            this.$nextTick(() => {
                console.log("进入清空方法")
                this.resetForm('form')
            })


        },
        toAddOrEdit() {
            //rules中的验证如果为真
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.saveOrUpdate();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //添加、修改入库的方法
        saveOrUpdate() {
            this.$axios.post(this.$httpUrl + '/store/saveOrUpdateMain', this.form).then(res => res.data).then(res => {
                //对响应结果做判断
                if (res.code == 200) {
                    this.resetForm('form');//重置表单内容
                    this.dialogFormVisible = false;
                    let message = "添加供应商信息成功";
                    //判断当前form表单中的id是否存在，如果存在，则是编辑，如果不存在，则是添加
                    if (this.form.id) {
                        message = "修改供应商信息成功";
                    } else {
                        this.pageNum = 1;
                    }
                    //重新加载当前页列表信息
                    this.loadStoreMainList(this.pageNum);
                    //消息提示
                    this.$message({
                        message: message,
                        type: 'success'
                    });

                } else {
                    var msg = '添加供应商信息出错了';
                    if (this.form.id) {
                        msg = '修改供应商信息出错了';
                    }
                    this.$message.error(msg);
                }
            });
        },
        //单元格内容居中对齐
        rowStyle() {
            return "text-align:center";
        },

    },
    beforeMount() {
        this.loadStoreMainList(1)
    }
}
</script>

<style lang="less" scoped>
.header {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;

    .group {
        border: 1px solid #eee;
        padding: 8px;
    }
}

.listContent {
    background: pink;
    height: 100px;

    /deep/.active-header {
        //   /deep/穿透
        color: #333;
        text-align: center;
    }
}

.el-form-item {
    margin-bottom: 20px;
}

.el-input__inner {
    height: 35px;
}
</style>